<template>
  <div class="content">
    <p-head></p-head>
    <!-- banner图 -->
    <div class="banner">
      <el-carousel>
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img
            :src="item.image"
            alt=""
            class="Img"
            style="position: relative; left: 50%; transform: translateX(-50%)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banner2">
      <el-carousel>
        <el-carousel-item v-for="item in appbanner" :key="item.id">
          <img :src="item.image" alt="" width="100%" height="100%" />
          <!-- <h3 class="small">{{ item.name }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 卡片 -->
    <div class="layout list_card">
      <ul class="card_ul">
        <li class="card_li" @click="toSone">
          <div class="card_content">
            <h3>高端网站定制</h3>
            <p>一对一定制网站开发，个性化服务满足不同的行业</p>
            <ul>
              <li>企业&品牌官网</li>
              <li>大型上市集团</li>
              <li>营销型网站</li>
            </ul>
            <p class="more">MORE >></p>
            <div class="card_logo">
              <img src="../../img/card1.png" alt="" />
            </div>
          </div>
        </li>
        <li class="card_li" @click="toStwo">
          <div class="card_content">
            <h3>响应式网站</h3>
            <p>拥有多年实战经验,为企业提供网站策划</p>
            <ul>
              <li>四站合一</li>
              <li>炫酷H5</li>
              <li>超速加载</li>
            </ul>
            <p class="more">MORE >></p>
            <div class="card_logo">
              <img src="../../img/card3.png" alt="" />
            </div>
          </div>
        </li>
        <li class="card_li" @click="toSthree">
          <div class="card_content">
            <h3>移动互联网</h3>
            <p>企业专属移动应用开发，走在移动互联网前沿</p>
            <ul>
              <li>手机网站</li>
              <li>小程序</li>
              <li>APP应用</li>
            </ul>
            <p class="more">MORE >></p>
            <div class="card_logo">
              <img src="../../img/card4.png" alt="" />
            </div>
          </div>
        </li>
        <li class="card_li" @click="toSfour">
          <div class="card_content">
            <h3>运营维护</h3>
            <p>多平台传播，托管式立体营销，实现利润增长</p>
            <ul>
              <li>网站运维托管</li>
              <li>搜索引擎SEO优化</li>
              <li>网站代运营</li>
            </ul>
            <p class="more">MORE >></p>
            <div class="card_logo">
              <img src="../../img/card2.png" alt="" />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- case -->
    <h3 class="headline">
      优秀的 <span class="dian">·</span> <span class="case">CASE</span>
    </h3>
    <h4 class="headlineTwo">为您提供创新的互联网解决方案</h4>
    <!-- casecontent -->

    <div class="layout case_list">
      <router-link :to="{ path: '/case' }">
        <div class="chakan">
          <span class="iconfont yf-icon-gengduo2"></span> View more
        </div></router-link
      >
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="ALL" name="first" :cnid="0">
            <div class="c_list">
              <ul>
                <li class="case_card" v-for="item in caselist" :key="item.id">
                  <div class="cc_detail">
                    <div class="cc_detailpic">
                      <router-link
                        :to="{
                          path: '/casedetail',
                          query: { case_id: item['id'] },
                        }"
                      >
                        <img :src="item.thumb" alt=""
                      /></router-link>
                    </div>

                    <div class="cc_detailtitle">
                      <router-link
                        :to="{
                          path: '/casedetail',
                          query: { case_id: item.id },
                        }"
                      >
                        <div>
                          <h3>{{ item.title }}</h3>
                          <p>中文 / {{ item.case_nav_name }}</p>
                        </div>
                      </router-link>
                      <template v-if="item.neturl">
                        <a :href="item.neturl" target="_blank">
                          <div class="iconfont yf-icon-lianjie"></div>
                        </a>
                      </template>
                      <template v-else>
                        <div
                          class="iconfont yf-icon-lianjie"
                          @click="noNetword()"
                        ></div>
                      </template>
                    </div>

                    <div class="cc_detailto">
                      <router-link
                        :to="{
                          path: '/casedetail',
                          query: { case_id: item['id'] },
                        }"
                      >
                        <span>Details</span></router-link
                      >
                      <span class="eyes"
                        ><i class="iconfont yf-icon-yanjing"></i> &nbsp;<span>{{
                          item.reading
                        }}</span></span
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <template v-for="item in case_nav" ：key="item.id">
            <el-tab-pane :label="item.name" :name="item.name" :cnid="item.id">
              <div class="c_list">
                <ul>
                  <li class="case_card" v-for="item in caselist" :key="item.id">
                    <div class="cc_detail">
                      <div class="cc_detailpic">
                        <router-link
                          :to="{
                            path: '/casedetail',
                            query: { case_id: item.id },
                          }"
                        >
                          <img :src="item.thumb" alt="" />
                        </router-link>
                      </div>

                      <div class="cc_detailtitle">
                        <router-link
                          :to="{
                            path: '/casedetail',
                            query: { case_id: item.id },
                          }"
                        >
                          <div>
                            <h3>{{ item.title }}</h3>
                            <p>中文 / {{ item.case_nav_name }}</p>
                          </div>
                        </router-link>

                        <template v-if="item.neturl">
                          <a :href="item.neturl" target="_blank">
                            <div class="iconfont yf-icon-lianjie"></div>
                          </a>
                        </template>
                        <template v-else>
                          <div
                            class="iconfont yf-icon-lianjie"
                            @click="noNetword()"
                          ></div>
                        </template>
                      </div>

                      <div class="cc_detailto">
                        <router-link
                          :to="{
                            path: '/casedetail',
                            query: { case_id: item.id },
                          }"
                          ><span>Details</span></router-link
                        >
                        <span class="eyes"
                          ><i class="iconfont yf-icon-yanjing"></i> &nbsp;<span
                            >{{ item.reading }}</span
                          ></span
                        >
                      </div>
                    </div>
                  </li>
                </ul>
                <template v-if="caselist.length == 0">
                  <el-empty description="暂无数据"></el-empty>
                </template>
              </div>
            </el-tab-pane>
          </template>
          <!--          <el-tab-pane label="pc端" name="third">22</el-tab-pane>-->
        </el-tabs>
      </template>
    </div>

    <!-- 盈锋新闻 -->
    <h3 class="headline">
      盈锋 <span class="dian">·</span> <span class="case">NEWS</span>
    </h3>
    <h4 class="headlineTwo">将理念与创意同您一同分享</h4>
    <!-- casecontent -->
    <div class="layout case_list case_listaa">
      <router-link :to="{ path: '/news' }">
        <div class="chakan">
          <span class="iconfont yf-icon-gengduo2"></span> View more
        </div></router-link
      >
      <template>
        <el-tabs v-model="newactiveName" @tab-click="handleclikNews">
          <el-tab-pane label="ALL" name="newall" :newsid="0">
            <div class="new_content">
              <div class="big_new">
                <div class="big_newpic">
                  <router-link
                    :to="{ path: '/newdetail', query: { newid: new_one.id } }"
                  >
                    <img :src="new_one.thumb" alt=""
                  /></router-link>
                </div>
                <div class="big_newcontent">
                  <p class="new_time">{{ new_one.create_time }}</p>
                  <h3>
                    {{ new_one.title }}
                  </h3>

                  <p class="new_detail">
                    {{ new_one.introduction }}
                  </p>
                  <div class="toNews" @click="toNews">了解更多新闻</div>
                </div>
              </div>
              <div class="small_new">
                <ul >
                  <template v-for="(item, key) in newlist.slice(0,5)" ：key="item.id">
                    <template v-if="key == 0"> </template>
                    <template v-else>
                      <li>
                        <div class="snew_content">
                          <div class="snew_right">
                            <router-link
                              :to="{
                                path: '/newdetail',
                                query: { newid: item['id'] },
                              }"
                            >
                              <img :src="item.thumb" alt=""
                            /></router-link>
                          </div>
                          <div class="snew_left">
                            <p>{{ item.create_time }}</p>
                            <router-link
                              :to="{
                                path: '/newdetail',
                                query: { newid: item['id'] },
                              }"
                            >
                              <h3>
                                {{ item.title }}
                              </h3>
                            </router-link>
                            <router-link
                              :to="{
                                path: '/newdetail',
                                query: { newid: item['id'] },
                              }"
                            >
                              <div class="know">了解详情</div>
                            </router-link>
                          </div>
                        </div>
                      </li>
                    </template>
                  </template>
                </ul>
              </div>
            </div>
          </el-tab-pane>

          <template v-for="(item, key) in new_nav" ：key="item.id">
            <el-tab-pane :label="item.name" :name="item.name" :newsid="item.id">
              <div class="new_content">
                <div class="big_new">
                  <div class="big_newpic">
                    <router-link
                      :to="{ path: '/news', query: { new_id: new_one['id'] } }"
                    >
                      <img :src="new_one.thumb" alt=""
                    /></router-link>
                  </div>
                  <div class="big_newcontent">
                    <p class="new_time">{{ new_one.create_time }}</p>
                    <h3>
                      {{ new_one.title }}
                    </h3>
                    <p class="new_detail">
                      {{ new_one.introduction }}
                    </p>
                    <div class="toNews">
                      <router-link
                        :to="{
                          path: '/news',
                          query: { new_id: new_one['id'] },
                        }"
                      >
                        了解更多新闻</router-link
                      >
                    </div>
                  </div>
                </div>
                <div class="small_new">
                  <ul >
                    <template v-for="(item, key) in newlist.slice(0,5)" ：key="item.id">
                      <template v-if="key == 0"> </template>
                      <template v-else>
                        <li>
                          <div class="snew_content">
                            <div class="snew_right">
                              <router-link
                                :to="{
                                  path: '/news',
                                  query: { new_id: item['id'] },
                                }"
                              >
                                <img :src="item.thumb" alt=""
                              /></router-link>
                            </div>
                            <div class="snew_left">
                              <p>{{ item.create_time }}</p>
                              <h3>{{ item.title }}</h3>
                              <router-link
                                :to="{
                                  path: '/news',
                                  query: { new_id: item['id'] },
                                }"
                              >
                                <div class="know">了解详情</div>
                              </router-link>
                            </div>
                          </div>
                        </li>
                      </template>
                    </template>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
          </template>
          <!--          <el-tab-pane label="企业新闻" name="firmnews"-->
          <!--            >vsdgbrfhnjn</el-tab-pane-->
        </el-tabs>
      </template>
    </div>
    <!-- 友情链接 -->
    <div class="friend layout">
      <div class="friend_l">友情链接:</div>
      <div class="friend_r">
        <ul class="friend_rbox">
          <li>企业官网</li>
          <li>响应式网站</li>
          <li>营销型网站</li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <p-foot></p-foot>

    <!-- 广告 -->
    <div class="advertising" v-show="advertisingShow">
      <div class="close" @click="close">
        <span class="iconfont yf-icon-cha"></span>
      </div>
      <div class="advertising_kuang">
        <div class="adv_content">
          <p class="adv_p1">免费咨询盈锋科技建站服务顾问</p>
          <p class="adv_p2">免费获得《专属策划方案》及报价详情</p>
          <h2>多一份参考、多一份选择</h2>
          <div class="adv_kuai">
            <div>电话：18811547597</div>
            <ul>
              <li @click="close">稍后再说</li>
              <li @click="tolianxi">立即咨询</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../../http/request";
import { successAlert, errorAlert } from "../../utils/alert";
export default {
  components: {},
  props: [],
  data() {
    return {
      activeName: "first",
      newactiveName: "newall",
      banner: [],
      appbanner: [],
      caselist: [],
      newlist: [],
      case_nav: [],
      new_nav: [],
      new_one: [],
      advertisingShow: false,
      AD: "",
      abc: "这是一个abc",
      // timer: null,
    };
  },
  methods: {
    //case 选择框
    handleClick(tab, event) {
      /**判断是否有值请求数据**/
      let smcate_id = tab.$attrs.cnid;
      get("/api/home/getall", { page: 1, limit: 6, smcate_id: smcate_id })
        .then((res) => {
          this.caselist = res.data.case.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleclikNews(tab, event) {
      /**判断是否有值请求数据**/
      let smcate_id = tab.$attrs.newsid;
      get("/api/home/getall", { page: 1, limit: 6, news_id: smcate_id })
        .then((res) => {
          this.newlist = res.data.news.list;
          this.new_one = this.newlist[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tolianxi() {
      this.$router.push({ path: "/relation" });
    },
    close() {
      this.advertisingShow = !this.advertisingShow;
    },
    toSone() {
      this.$router.push({ path: "/sone" });
    },
    toStwo() {
      this.$router.push({ path: "/stwo" });
    },
    toSthree() {
      this.$router.push({ path: "/sthree" });
    },
    toSfour() {
      this.$router.push({ path: "/sfour" });
    },
    toNews() {
      this.$router.push({ path: "/news" });
    },

    noNetword() {
      errorAlert("改项目不是网站,请先关注在查看内容!");
    },
  },
  computed: {},
  watch: {},
  mounted() {
    get("/api/home/getall", { page: 1, limit: 6 })
      .then((res) => {
        if (res.data.code == 200) {
          this.banner = res.data.banner;
          this.appbanner = res.data.appbanner;
          this.caselist = res.data.case.list;
          this.case_nav = res.data.case.case_nav;
          this.newlist = res.data.news.list;
          this.new_one = this.newlist[0];
          this.new_nav = res.data.news.new_nav;
        }
      })
      .catch((err) => {
        console.log(err);
      });
    setTimeout(() => {
      this.advertisingShow = !this.advertisingShow;
    }, 3000);
  },
};
</script>

<style lang="less">
@import "../../less/index.less";
@import "../../assets/css/reset.css";

.layout {
  width: 90%;
  margin: 0 auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.banner {
  width: 100%;
  height: 600px;
}

/* 卡片 */
.list_card {
  margin-top: 46px;
}

.card_ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card_ul .card_li {
  width: 23%;
  height: 346px;
  border: 2px solid #d8d8d8;
  margin-top: 50px;
  transition: 0.5s;
}

.card_content {
  position: relative;
  padding: 30px;
}

.card_content h3 {
  font: 20px/50px "微软雅黑";
  color: #333;
}

.card_content p {
  font: 14px/38px "微软雅黑";
  color: #999999;
}

.card_content ul li {
  font: 12px/38px "微软雅黑";
  color: #999999;
}

.card_content .more {
  font: 12px/38px "微软雅黑";
  color: #999999;
}

.card_logo {
  position: absolute;
  bottom: 0%;
  right: 5%;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.card_logo img {
  width: 100%;
  height: 100%;
}

.card_li:hover {
  background-color: #3a6cfe;
  color: #fff;
  box-shadow: 0px 6px 6px 0px #3a6cfe;
  margin-top: -20px;
  border: none;
}

.card_li:hover .card_content h3 {
  color: #fff;
}

.card_li:hover .card_content p {
  color: #fff;
}

.card_li:hover .card_content ul li {
  color: #fff;
}

.card_li:hover .card_content .more {
  color: #fff;
}

.headline {
  text-align: center;
  margin-top: 40px;
  line-height: 80px;
  color: black;
  font-weight: bold;
  font-size: 38px;
}

.dian {
  font-size: 30px;
  color: #cdcdcd;
}

.case {
  font-size: 38px;
  color: #3a6cfe;
}

.headlineTwo {
  font-size: 16px;
  color: #8a8a8a;
  text-align: center;
  font-weight: normal;
}

/* // case选项卡 */
.case_list {
  margin-top: 40px;
  position: relative;
}
.chakan {
  position: absolute;
  right: 0;
  top: 1%;
  cursor: pointer;
  z-index: 10;
  color: black;
}
.chakan:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  transition: 0.3s;
}
.case_list .el-tabs__item {
  text-align: center;
  width: 148px;
  height: 48px;
  line-height: 48px;
  padding: 0;
}
.case_list .el-tabs__item:hover {
  // color: #fff;
}

\deep\.case_list .el-tabs__item:hover {
  width: 148px;
  height: 48px;
  background-color: #3a6cfe;
  color: #fff;
}

.case_list .el-tabs__item.is-active {
  background-color: #3a6cfe;
  color: #fff;
}

.case_listaa .el-tabs__content {
  margin-top: -20px;
  max-height: 840px;
}

.c_list {
  width: 100%;
  // min-height: 800px;
}

.c_list ul {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
}

.c_list ul li {
  width: 30%;
  height: 500px;
  border: 1px solid #f5f5f5;
  margin-top: 40px;
  margin-right: 3%;
}

.cc_detail {
  width: 100%;
}

.cc_detailpic {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.cc_detailpic img {
  width: 100%;
  height: 100%;
}
.cc_detailpic img:hover {
  transform: scale(1.2); // 放大1.5倍
  transition: all 0.3s; // 设置加载时间
}

.cc_detailtitle {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.cc_detailtitle h3 {
  font-size: 18px;
  font-weight: blod;
  color: black;
}

.cc_detailtitle p {
  font-size: 14px;
  color: #555555;
}

.yf-icon-lianjie {
  font-size: 24px;
  color: #787878;
  cursor: pointer;
}

.cc_detailto {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #fff;
}

.cc_detailto span {
  font-size: 14px;
  color: #929292;
}

/* //盈锋新闻 */
.new_content {
  width: 100%;
  height: 770px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: 20px;
}

.big_new {
  width: 40%;
  height: 100%;
  /* background-color: rgb(247, 247, 191); */
}

.big_newpic {
  height: 60%;
  width: 100%;
}

.big_newpic img {
  height: 100%;
  width: 100%;
}

.big_newcontent {
  box-sizing: border-box;
  padding: 20px 30px;
}

.big_newcontent .new_time {
  font-size: 14px;
  color: #333333;
}

.big_newcontent .new_detail {
  margin-top: 16px;
  color: #666666;
  font: 16px/24px "微软雅黑";
}

.big_newcontent h3 {
  margin-top: 16px;
  color: #666666;
  font: 24px/36px "微软雅黑";
  cursor: pointer;
}

.toNews {
  margin-top: 30px;
  width: 120px;
  height: 30px;
  background-color: #3a6cfe;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font: 14px/30px "微软雅黑";
}

.toNews a {
  color: #fff;
  text-decoration: #3a6cfe;
}
.toNews .router-active {
  text-decoration: none;
}
.toNews .router-link-active {
  text-decoration: none;
}
.small_new {
  width: 58%;
  height: 100%;
}

.small_new ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  // align-content: space-between;
  box-sizing: border-box;
}

.small_new ul li {
  /* background-color: pink; */
  height: 23%;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.small_new ul li:hover {
  margin-left: 5%;
  transition: 0.5s;
  .know {
    background-color: #3a6cfe;
    color: #fff;
    cursor: pointer;
  }
}
.snew_content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.snew_right {
  height: 100%;
  width: 45%;
}

.snew_right img {
  height: 100%;
  width: 100%;
}

.snew_left {
  padding-left: 18px;
  width: 50%;
}

.snew_left p {
  font: 14px;
  color: #333333;
  margin-top: 20px;
  margin-bottom: 26px;
}

.snew_left h3 {
  font: 20px "微软雅黑";
  margin-bottom: 30px;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
  color: black;
  height: 50px;
  overflow: hidden;
}

.snew_left .know {
  width: 92px;
  height: 30px;
  /* background-color: @primary; */
  font: 14px/30px "微软雅黑";
  color: #666666;
  text-align: center;
  border: 1px solid #e4e4e4;
}

.snew_left .know:hover {
  background-color: #3a6cfe;
  color: #fff;
  cursor: pointer;
}

.friend {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.friend .friend_r .friend_rbox {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.friend_l {
  font: 14px "微软雅黑";
  color: #333333;
  margin-left: 18px;
}

.friend_rbox li {
  font: 14px "微软雅黑";
  color: #666666;
  margin-left: 18px;
  cursor: pointer;
}
.toNews a {
  text-decoration: underline;
}
.banner {
  width: 100%;
  height: 600px;
}
.banner .el-carousel__container {
  width: 100%;
  height: 600px;
}
.banner .carousel__item {
  height: 100%;
  width: 100%;
}
.banner2 {
  display: none;
  width: 100%;
  height: 300px;
}
.banner2 .el-carousel__container {
  height: 300px;
}
.banner2 .carousel__item {
  height: 300px;
}
.sis-active is-animating {
  height: 300px;
}
.banner2 .carousel__item img {
  height: 300px;
}

.el-tabs__nav-wrap::after {
  display: none;
}

// 广告
.advertising {
  position: fixed;
  top: 17%;
  left: 34%;
  width: 35%;
  height: 40%;
  z-index: 10;
  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #117bdf;
    border-radius: 50%;
    cursor: pointer;
    // float:right;
    span {
      line-height: 40px;
      font-size: 20px;
      color: #fff;
    }
  }
  // text-align: center;
  .advertising_kuang {
    position: absolute;
    // float: left;
    top: 42px;
    left: 0;
    width: 90%;
    background-color: #117bdf;
    height: 380px;
    box-sizing: border-box;
    padding: 10px;
    .adv_content {
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px solid #fff;
    }
    .adv_p1,
    .adv_p2 {
      padding: 0 6%;
      font: 18px/28px "微软雅黑";
      color: #fff;
    }
    .adv_p1 {
      padding: 0 6%;
      margin-top: 60px;
    }
    h2 {
      font: 46px/50px "微软雅黑";
      margin-top: 10px;
      margin-bottom: 40px;
      padding: 0 6%;
      color: #fff;
    }
    .adv_kuai {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        width: 43%;
        height: 100%;
        text-align: center;
        font: 18px/60px "微软雅黑";
        color: #fff;
        text-align: center;
      }
      ul {
        width: 57%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        li {
          width: 50%;
          height: 100%;
          font: 15px/60px "微软雅黑";
          color: #fff;
          border: 1px solid #fff;
          text-align: center;
        }
        li:hover {
          background-color: #fff;
          color: black;
          cursor: pointer;
        }
      }
    }
  }
}


.eyes:hover {
  -webkit-transform: scaleY(0.01);
  transform: scaleY(0.01);
  transition: 0.3s;
}
.el-tabs__active-bar {
  display: none;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*添加动画*/
.list_card,
.case_list {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
}

/* 响应式布局 */
@media screen and (max-width: 1500px) {
  .advertising .advertising_kuang .adv_kuai div {
    display: none;
  }
  .advertising .advertising_kuang .adv_kuai ul {
    width: 100%;
  }
}
@media screen and (max-width: 1300px) {
  .chakan {
    display: none;
  }
}
@media screen and (max-width: 1250px) {
  .advertising {
    height: 35%;
  }
  .advertising .advertising_kuang h2 {
    font-size: 30px;
  }
  .advertising .advertising_kuang .adv_p1 {
    font-size: 16px;
  }
  .advertising .advertising_kuang .adv_kuai div {
    display: none;
  }
  .advertising .advertising_kuang .adv_kuai ul {
    width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .header_list .hlist_content li:hover::after {
    left: 55px;
  }
}

@media screen and (max-width: 992px) {
  .header_see {
    width: 15%;
    margin-right: 30px;
  }

  .code {
    left: 15%;
  }
  // .logo {
  //   // width: 20%;
  // }

  .header_list {
    width: 50%;
  }

  .card_ul .card_li {
    width: 45%;
  }

  .c_list ul li {
    width: 45%;
  }

  .big_new {
    display: none;
  }

  .small_new {
    width: 100%;
  }

  .advertising {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .header_see {
    display: none;
  }

  // .logo {
  //   width: 20%;
  // }

  .header_list {
    width: 70%;
  }

  .card_ul .card_li {
    width: 100%;
  }

  .c_list ul li {
    width: 100%;
  }
  .advertising .advertising_kuang .adv_kuai div {
    font-size: -1px;
  }
  .advertising {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .snew_left p {
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .header {
    height: 80px;
  }
  .banner {
    display: none;
  }
  .snew_content {
    height: 60%;
  }
  .snew_right img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
  .small_new ul li {
    margin-bottom: 0px;
  }
  .banner2 {
    display: block;
  }

  // .logo {
  //   width: 20%;
  // }

  .header_list {
    width: 70%;
  }

  .card_ul .card_li {
    width: 100%;
  }

  .c_list ul li {
    width: 100%;
  }
  .list_card {
    margin-top: 0;
  }
  .headline,
  .case {
    font-size: 30px;
  }
  .dian {
    font-size: 24px;
  }
  .headlineTwo {
    font-size: 14px;
  }
  .friend {
    display: none;
  }
  .foot_bottom_left {
    display: none;
  }
  .c_list ul li {
    height: 420px;
  }
  .cc_detailpic {
    height: 300px;
  }
  .cc_detailtitle {
    height: 60px;
  }
  .cc_detailto {
    height: 50px;
  }
  .card_content p {
    height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .card_li:hover {
    background-color: #3a6cfe;
    color: #fff;
    box-shadow: 0px 0px 0px 0px #3a6cfe;
    border: none;
    margin-top: 0;
  }
  .new_content {
    margin-bottom: 20px;
  }
  .snew_left .know {
    display: none;
  }
  .snew_content {
    height: 80%;
  }
  .snew_right {
    width: 55%;
  }
  .small_new ul {
    height: 80%;
  }
  .snew_left h3 {
    height: 40px;
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
  }
}
</style>